<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="AppController as app">
<button class="btn btn-primary" ng-click="app.change();">change</button>
<div ng-repeat="user in app.users">
    <span>{{user.name}}</span>
    <span>{{user.age}}</span>
    <button class="btn btn-danger">xxx</button>
</div>

<script src="../app/bower_components/jquery/dist/jquery.js"></script>
<script src="../app/bower_components/angular/angular.js"></script>

<script>
    var app = angular.module('app', []);
    app.controller('AppController', function () {
        var current = 1;
        this.users = getUsers();

        this.change = function () {
            current++;
            this.users = getUsers();
        };


        function getUsers() {
            var users = [];
            for (var i = 0; i < 10; i++) {
                var user = {
                    $id: current + i,
                    name: current + ' name ' + i,
                    age: current + ' age ' + i
                };
                users.push(user);
            }
            return users;
        }

    });
    app.directive('abc', function () {
        return {
            restrict: 'ACE',
            link: function (scope, element, attrs) {

            }
        }
    });

</script>
</body>
</html>